
<template>
  <el-select
    v-model="curValue"
    v-loadmore="val=> handleScroll(val, 'cItem')"
    filterable
    :placeholder="placeholder"
    remote
    :disabled="disabled"
    :remote-method="remoteChange"
    @focus="changeFocus"
    @change="handleChange"
  >
    <el-option
      v-for="item in List"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>

</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    loadData: {
      type: Function,
      require: true,
      default: () => {
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      List: [],
      query: '',
      curData: {

      }

    }
  },
  computed: {
    curValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    name(newVal) {
      if (!this.curData.id) {
        this.List.push({
          id: this.value,
          name: newVal
        })
        this.curData = {
          id: this.value,
          name: newVal
        }
      }
    }

  },
  mounted() {
    if (this.name && this.value) {
      this.List.push({
        id: this.value,
        name: this.name
      })
      this.curData = {
        id: this.value,
        name: this.name
      }
    }
  },
  methods: {
    // 远程搜索关键字
    remoteChange(query = '') {
      // 重新赋值
      this.query = query
      // 关键字为空
      if (query) {
        this.list = []
        this.pageNum = 1
      }
      // 调用接口
      this.getData()
    },
    // 接口方法
    async getData() {
      const obj = { name: this.query, currentPage: this.pageNum, pageSize: this.pageSize }
      // 接口
      const res = await this.loadData(obj)
      const f = res.records.findIndex(f => f.id === this.curData.id)
      if (this.pageNum === 1 && f < 0) {
        this.List = res.records
      } else if (this.pageNum === 1 && f >= 0) {
        res.records.splice(f, 1)
        this.List = [this.curData, ...res.records]
      } else if (f >= 0) {
        // res.records.splice(f, 1)
        this.List = this.List.concat(res.records)
      } else {
        this.List = this.List.concat(res.records)
      }

      // if (f > -1) {
      //   res.records.splice(f, 1)
      //   if (this.pageNum === 1) {
      //     if (this.curData.id) {
      //       this.List = [this.curData, ...res.records]
      //       console.log('22:', this.List, this.pageNum)
      //     } else {
      //       this.List = res.records
      //     }
      //   } else {
      //     this.List.concat(res.records)
      //   }
      // } else {
      //   this.List = this.pageNum === 1 ? res.records : this.List.concat(res.records)
      //   console.log('11:', this.List)
      // }
      // 获取总页数
      this.totlePages = parseInt(res.total / this.pageSize) + 1
      console.log('totlePages:', this.totlePages)
      // this.lodaData(obj).then(res => {
      //   // 整合数组

      // }).catch(error => {
      //   this.$message.error(error.message)
      // })
    },
    // 滚动条滚动
    handleScroll(val) {
      console.log('pageNum:', this.pageNum)
      if (this.totlePages >= this.pageNum) {
        // 总页码大于 当前页码，滚动页码加1
        this.pageNum += 1
        // 滚动调用接口
        this.getData(this.query)
      }
    },
    // 聚焦是获取数据，需把关键字置空
    changeFocus() {
      this.pageNum = 1
      this.query = ''
      // 掉接口
      this.getData()
    },
    handleChange(v) {
      var f = this.List.find(f => f.id === v)
      this.$emit('change', f)
    }
  }
}

</script>
